<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ下拉选项特效</title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				width: 200px;
				background-color: #9900CC;
				border: 1px solid #666666;
				margin: 100px 0  0 100px;
				box-shadow: 1px 2px 30px rgba(0,0,0,0.5);
				-webkit-user-select: none;
			}
			#box ul li p{color: #fff;text-align: left;padding-left:8px;font-size: 15px;font-weight: 700;font-family: "arial narrow";padding-top: 10px;padding-bottom: 10px;
				border: 5px solid #000000;
			}
			.item{background: #fff;display: none;}
			.item li{line-height: 35px;border-bottom: 1px dotted #E7E7E7;padding-left:8px;}
			.item li:hover{background-color: chartreuse;}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="title">
					<p>好友</p>
					<ul class="item">
						<li>88888</li>
						<li>皇者</li>
						<li>张学良</li>
						<li>郭禹彤</li>
						<li>张学良</li>
						<li>郭禹彤</li>
					</ul>
				</li>
				
				<li class="title">
					<p >同事</p>
					<ul class="item">
						<li>小福</li>
						<li>阿峰</li>
						<li>fredyyhuang</li>
						<li>ui小董</li>
					</ul>
				</li>
				
				<li class="title">
					<p>老师</p>
					<ul class="item">
						<li>千寻</li>
						<li>风屿</li>
						<li>啊飞</li>
						<li>心艾</li>
						<li>木马</li>
						<li>星星</li>
					</ul>
				</li>
				
			</ul>
		</div>
		<script type="text/javascript">
			var atitle = document.getElementsByClassName('title');
			//console.log(atitle)
			for (let i = 0; i < atitle.length; i++) {
				atitle[i].onclick = function(e){
					for(let j = 0;j<atitle.length;j++){
						atitle[j].getElementsByClassName("item")[0].style.display = "none";
					}
					this.getElementsByClassName("item")[0].style.display = "block";
				}
			}
		</script>
	</body>
</html>
